<template>
	<view  class="login_header">
		<view class="mine_header width92 flex_spaceBetween">
			<view class="flex_column login width92">
				<image :src="logo" class="login_logo" mode="widthFix"></image>
			</view>
		</view>
		<view class="width92">
			<view class="login_input flex_start">
			    <image :src="accountIcon" mode="widthFix"></image>
			    <input placeholder="请输入账号" type="number" v-model="loginParams.account" maxlength="11" />
			</view>
			<view class="login_input flex_start">
			    <image :src="passwordIcon" mode="widthFix"></image>
			    <input placeholder="请输入密码" type="password" v-model="loginParams.password"  />
			</view>
			<button
				class="payPopup_payBtnHeight50 public_button flex_center pubBtnWidth45_colorFFF login_btn">立即登录</button>
			<button class="payPopup_payBtnHeight50 public_button flex_center pubBtnWidth45_color333F7f7f7 login_btn"
				@click="navigatoPage('login/login')">手机号快捷登录</button>
			
		</view>

		<view class="pubBottomFixed">
			<button class="public_button flex_center pubBtnWidth45_color666" @click="navigatoHome">取消登录</button>
		</view>



	</view>

</template>

<script>
	export default {
		data() {
			return {
				logo: this.$staticImgurl + "logo.png",
				accountIcon: this.$staticImgurl + "login_account.png",
				passwordIcon: this.$staticImgurl + "login_password.png",
				loginParams:{
					account:"",//账号
					password:"",//密码
				},
				
			};
		},
		onShow() {
			
		},
		mounted() {

		},
		beforeDestroy() {

		},
		methods: {
			//页面跳转
			navigatoPage(page, type) {
				let url = "/pages/" + page
				if (type) {
					url += "?type=" + type;
				}
				uni.navigateTo({
					url
				});
			},
			//取消登录
			navigatoHome() {
				uni.switchTab({
				    url: "/pages/home/home",
				});
			},
		},
	};
</script>

<style scoped>
	.login_header {
		height: 100%;
		width: 100%;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		overflow: hidden;
	}

	.login {
		margin-top: 80px;
	}

	.login_logo {
		width: 300rpx;
	}

	.login_appName {
		font-weight: 500;
		font-size: 22px;
		color: #000000;
		margin-top: 15px;
	}

	.login_inputPassword,
	.login_input {
		width: 100%;
		padding: 15px 4%;
		border-bottom: 1px solid #efefef;
		overflow: hidden;
	}

	.login_inputPassword image,
	.login_input image {
		width: 18px;
	}
	
	.login_input {
		margin-top: 50px;
	}
	
	.login_btn {
		margin-top: 20px;
	}
	
	.login_input + .login_input {
		margin-top: 10px;
	}
	.login_input input {
		width: calc(100% - 30px);
	}

	.login_inputPassword>view {
		width: calc(100% - 100px);
	}

	.login_inputPassword input {
		width: 80%;
	}

	.login_input input,
	.login_inputPassword input {
		margin-left: 10px;
		font-size: 14px;
		color: #333;
	}

	

	.pubBottomFixed {
		background: transparent;
		box-shadow: none;
	}

	.login_otherType button {
		width: 46px;
		height: 46px;
		background: rgba(255, 255, 255, 0);
		border-radius: 23px 23px 23px 23px;
		border: 1px solid #ebebeb;
	}

	.login_otherType button+button {
		margin-left: 25px;
	}

	.login_otherType button image {
		width: 26px;
		height: 26px;
	}

	/deep/ uni-radio .uni-radio-input {
		margin: 0px;
		border-radius: 0px;
	}

	/deep/ .u-checkbox__label {
		margin-right: 0px;
	}

	.login_desc {
		font-size: 14px;
		color: #666666;
		margin-left: 5px;
	}

	.login_desc button {
		color: #1664ff;
	}
</style>